<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录</title>
  <link rel="stylesheet" href="./layui/css/layui.css">
  <link rel="stylesheet" href="./css/layui.css">
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #concent {
      width: 100%;
      height: 620px;
      background-size: cover;
      position: relative;
    }

    #concent img {
      width: 100%;
      height: 100%;
      position: absolute;
    }

    .box {
      font-size: 20px;
      margin-top: 20px;
    }

    .login {
      width: 480px;
      height: 400px;
      position: absolute;
      left: calc(50% - 240px);
      top: calc(50% - 200px);
      background-color: white;
      text-align: center;
      opacity: 0.7;
    }

    .login h1 {
      padding: 25px 0 50px 0;
      font-weight: 1000;
    }

    .usernames {
      width: 62%;
      height: 35px;
      border-radius: 5px;
      margin: 0 0 30px 0;
    }

    .password {
      width: 62%;
      height: 35px;
      border-radius: 5px;
      margin: 0 0 30px 0;
    }

    .btn1 {
      background-color: rgb(0, 182, 152);
      color: white;
      width: 70%;
      height: 40px;
      border-radius: 5px;
      border: 0;
    }

    span {
      color: red;
    }

    #userId,
    #pwdId {
      position: absolute;
      left: calc(50% + 168px);
      line-height: 35px;
    }
  </style>
</head>

<body>
  <div id="concent">
    <img src="./img/login.jpg" alt="">
    <div class="login">
      <form name="f" onsubmit="check(this)"></form>
      <div class="box">
        <div id="showTime"></div>
      </div>
      <h1>商城后台管理系统</h1>
      账号:<input type="text" placeholder=" 请输入账号" class="usernames" id="user"><span id="userId"></span><br>
      密码:<input type="password" placeholder=" 请输入密码" class="password" id="pwd"><span id="pwdId"></span>
      <button class="btn1" onclick="check(this)">登录</button>
      </form>
    </div>
  </div>

  <script src="./js/jQuery.3.6.0-uncompress.js"></script>
  <script src="./layui/layui.js"></script>
  <script src="./js/database.js"></script>
  <script src="./js/login.js"></script>
  <script>
    // //登录
    // function check(thisform) {
    //   var name = document.getElementById("user").value;
    //   var pass = document.getElementById("pwd").value;
    //   var userId = document.getElementById("userId");
    //   var pwdId = document.getElementById("pwdId")
    //   if (name == "admin" && pass == "123456" || name == "store" && pass == "456789") {
    //     // alert("登录成功");
    //     layer.msg('登录成功');
    //     window.document.f.action = "index.html";
    //     window.document.f.submit();
    //   } else {
    //     if (name != "admin" && name != "store") {
    //       // alert("用户名错误");
    //       userId.innerText = "X 账号错误";
    //     }
    //     if (pwd != "123456" && pwd != "456789") {
    //       // alert("密码错误");
    //       pwdId.innerText = "X 密码错误";
    //     }
    //   }
    // }
    //时间
    let myClock = setInterval(function () {
      var date = new Date();
      var week = date.getDay()
      switch (week) {
        case 1:
          week = "星期一"
          break;
        case 2:
          week = "星期二"
          break;
        case 3:
          week = "星期三"
          break;
        case 4:
          week = "星期四"
          break;
        case 5:
          week = "星期五"
          break;
        case 6:
          week = "星期六"
          break;
        case 0:
          week = "星期日"
          break;
      }
      let ymd = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
      let hms = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
      document.getElementById("showTime").innerHTML = ymd + "&nbsp;&nbsp;" + week + "&nbsp;&nbsp; " + hms;
    }, 1000)
  </script>
</body>

</html>